<template>
  <div class="message-content">
    <div class="time-stamp">{{ msg.time }}</div>
    <el-card shadow="hover" class="message-bubble">
      <template v-if="msg.type === 'image'">
        <div class="media-wrapper">
          <el-image
            :src="msg.content"
            :preview-src-list="[msg.content]"
            fit="cover"
            style="max-width: 100px; border-radius: 8px;"
          ></el-image>
        </div>
      </template>
      <template v-else-if="msg.type === 'video'">
        <div class="media-wrapper">
          <video
            :src="msg.content"
            controls
            style="max-width: 100px; border-radius: 8px;"
          ></video>
          <i class="el-icon-video-play video-play-icon"></i>
        </div>
      </template>
      <template v-else-if="msg.type === 'file'">
        <div class="file-wrapper">
          <div class="file-info">
            <img :src="getFileIcon(msg.file_info.name)" alt="File Icon" class="file-icon"/>
            <span class="file-name">{{ msg.file_info.name }}</span>
            <span class="file-size">{{ msg.file_info.size }}</span>
            <a :href="msg.file_info.url" class="file-download">
              <i class="el-icon-download file-download-icon"></i>
            </a>
          </div>
        </div>
      </template>
      <template v-else-if="msg.type === 'goods'">
        <div class="goods-wrapper" @click="previewGoods(msg.goods_info)">
          <div class="goods-image">
            <el-image
              :src="msg.goods_info.goods_image"
              fit="cover"
              style="width: 50px;height: 50px; border-radius: 8px;"
            ></el-image>
          </div>
          <div class="goods-info">
            <div class="goods-title">{{ msg.goods_info.goods_name }}</div>
            <div class="goods-price">￥{{ msg.goods_info.goods_price }} 元</div>
          </div>
        </div>
      </template>
      <template v-else-if="msg.type === 'order'">
        <div class="order-wrapper"
             @click="$router.push({path:'/order/detail',query:{order_id:msg.order_info.order_id}})"
        >
          <div class="order-image">
            <el-image
              :src="msg.order_info.goods_image"
              fit="cover"
              style="width: 50px;height: 50px; border-radius: 8px;"
            ></el-image>
          </div>
          <div class="order-info">
            <div class="order-title">订单号：{{ msg.order_info.order_sn }}</div>
            <div class="order-price">应付款：{{ msg.order_info.order_pay_price }}元</div>
            <div class="order-price-pay">实付款：{{ msg.order_info.pay_price || '0.00' }}元</div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="text-wrapper">
          <div class="text-content">{{ msg.content }}</div>
        </div>
      </template>

    </el-card>
    <!-- 商品预览 Dialog -->
    <preview
      :goods-preview-visible="goodsPreviewVisible"
      :goods-preview-url="goodsPreviewUrl"
      :width="375"
      @update:goodsPreviewVisible="goodsPreviewVisible = $event"
    ></preview>
  </div>
</template>

<script>
import Preview from '@/components/goods/preview'
export default {
  name: 'MessageItmes',
  components: {
    Preview
  },
  props: {
    msg: {
      type: Object,
      default: () => {
        return {
          type: '',
          content: '',
          time: ''
        }
      }
    }
  },
  data() {
    return {
      goodsPreviewVisible: false,
      goodsPreviewUrl: '',
      fileIcons: {
        pdf: 'https://source.alipay168.cn/skushop/a4ac61fc8778b095bf913be7dcf0ac0c.png',
        doc: 'https://source.alipay168.cn/skushop/4ab03286576772c335155e55c2cdfc30.png',
        docx: 'https://source.alipay168.cn/skushop/4ab03286576772c335155e55c2cdfc30.png',
        xls: 'https://source.alipay168.cn/skushop/29462525a7589c1856d1d20d44c07289.png',
        xlsx: 'https://source.alipay168.cn/skushop/29462525a7589c1856d1d20d44c07289.png',
        png: 'https://source.alipay168.cn/skushop/073676a7387be6c78da3c90b48c720d4.png',
        jpg: 'https://source.alipay168.cn/skushop/073676a7387be6c78da3c90b48c720d4.png',
        jpeg: 'https://source.alipay168.cn/skushop/073676a7387be6c78da3c90b48c720d4.png',
        gif: 'https://source.alipay168.cn/skushop/073676a7387be6c78da3c90b48c720d4.png',
        ppt: 'https://source.alipay168.cn/skushop/df48fed9eab6fc6ff32a84a8452dea02.png',
        default: 'https://source.alipay168.cn/skushop/8522684198fdc137ed94fce7317b30cc.png'
      }
    }

  },
  mounted() {
  },
  methods: {
    getFileIcon(fileName) {
      const extension = fileName.split('.').pop().toLowerCase()
      return this.fileIcons[extension] || this.fileIcons['default']
    },
    previewGoods(goods_info) {
      this.goodsPreviewUrl = `https://sku.alipay168.cn/#/pages/goods/detail?item_id=${goods_info.goods_id}`
      this.goodsPreviewVisible = true
    }
  }

}
</script>

<style scoped>
.message-content {
  margin-bottom: 20px;
}

/deep/ .el-card__body, .el-main {
  padding: 10px !important;
  word-break: break-all;
}

.file-icon {
  width: 30px;
  height: 30px;
}

.message-bubble {
  border-radius: 15px !important;
  border: none !important;

  transition: transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-bubble.user {
  color: #0f0f0f;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.avatar {
  background: unset !important;
}

.order-wrapper, .goods-wrapper {
  /*鼠标手*/
  cursor: pointer;
}

.order-title {
  color: blue;
}

.order-price {
  color: #19a6de;
}

.order-price-pay {
  color: red;
}

.message-content {
  max-width: 70%;
}

.time-stamp {
  font-size: 12px;
  color: #909399;
  margin: 4px 10px;
}

.file-info {
  display: flex;
  align-items: center;
}

.file-name {
  font-size: 14px;
  color: #0f0f0f;
  margin-left: 10px;
}

/deep/ .file-size {
  font-size: 12px;
  color: #909399;
  margin-left: 10px;
}

/deep/ .file-download {
  cursor: pointer;
  color: #0d76e7;
  margin-left: 10px;
}
</style>
